
<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!--bootstrap-->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">

  <!-- bootstrap-lightbox -->  
  <link href="<?php echo base_url();?>/css/bootstrap-lightbox.css" rel="stylesheet" type="text/css" />

  <!--My Styles-->
  <link href="<?php echo base_url();?>/css/search-form.css" rel="stylesheet" type="text/css" />
  <link href="<?php echo base_url();?>/css/style.css" rel="stylesheet" type="text/css" />

  <!--jqueryUI-->
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/blitzer/jquery-ui.min.css" />

  <!--cdn google-->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

  <!--bootstrap-->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

  <!--jquery datepicker-->
  <script type="text/javascript" src="<?php echo base_url();?>/js/show_datepicker.js"></script>

  <!-- bootstrap3-typehead -->
  <script type="text/javascript" src="<?php echo base_url();?>/js/bootstrap3-typehead.js"></script>

  <!-- jquery validation -->
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>

  <!-- bootstrap-lightbox --> 
  <script type="text/javascript" src="<?php echo base_url();?>/js/bootstrap-lightbox.js"></script>

</head>
<body>

  <nav class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-home"></span> Home</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#"><span class="glyphicon glyphicon-calendar"></span> Travel itinerary</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-book"></span> Booking <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li role="presentation" class="dropdown-header">Traffic</li>
            <li><a href="#"><span class="glyphicon glyphicon-plane"></span>  Plane</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-road"></span>  Train</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-tree-conifer"></span>  Taxi</a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation" class="dropdown-header">Place</li>
            <li><a href="#"><span class="glyphicon glyphicon-cutlery"></span>  Hotel</a></li>
          </ul>
        </li>
      </ul>
      <form id="custom-search-form" class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input id="SearchString" name="SearchString" type="text" class="form-control search-query" size="35" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default btn-lg">
          <span class="glyphicon glyphicon-search"></span>
        </button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> Setting <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Logout</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </nav>

  <!-- <h1>This is category view</h1> -->
  <!-- <img id="iamge-test" src="<?php echo base_url();?>/images/users/arsenal.jpg" alt="..." class="img-circle"> -->

  <div class="row">

  </div>


  <div class="row">

    <div class="col-lg-2" id="history"></div> <!-- #history -->

    <div class="col-lg-3" id="status">

      <div class="row">

        <div id="status-post">

          <form id="form-status-post" class="form-horizontal" role="form">

            <div class="form-group">
              <div class="col-lg-12">                
                <textarea rows="3" class="form-control" id="status-post-content" placeholder="post here..."></textarea>
              </div>
            </div>

            <div class="form-group">
              <div class="col-lg-12">

                <button id="text" type="button" class="btn btn-danger">
                  <span class="glyphicon glyphicon-pencil"></span> Text
                </button><!-- &nbsp; -->

                <button id="link" type="button" class="btn btn-primary">
                  <span class="glyphicon glyphicon-link"></span> link
                </button><!-- &nbsp;  -->

                <button id="photo" type="button" class="btn btn-success">
                  <span class="glyphicon glyphicon-camera"></span> Photos
                </button><!-- &nbsp; -->

                <button id="video" type="button" class="btn btn-warning">
                  <span class="glyphicon glyphicon-facetime-video"></span> Video
                </button>

              </div>
            </div>

          </form> <!-- #form-status-post -->

        </div> <!-- #status-post -->

      </div>

      <div class="row">

        <div id="status-list">


          <div class="status-message">

            <div class="message-header">
              <div class="user-image">
                <img src="<?php echo base_url();?>/images/users/arsenal.jpg" alt="..." class="img-circle">
              </div>
              <div class="user-info">
                <span class="user-info-name">Tan Nguyen</span>
                <span class="user-info-date">1/1/2011 9:0 AM</span>
              </div>
            </div> <!-- .message-header -->

            <hr />

            <div class="message-body">

              <p>Double coffee, double milk, sitting and looking at the computer screen :)
               Vài đứa đã đi làm, vài đứa đang mải mê học (mày mò) thêm vài thứ gì đấy :
             </p>

             <p>
              <button id="btn-like" type="button" class="btn btn-xs btn-danger">
                <span class="glyphicon glyphicon-thumbs-up">19</span>
              </button>

              <button id="btn-like" type="button" class="btn btn-xs btn-primary">
                <span class="glyphicon glyphicon-share-alt">18</span>
              </button>
            </p>

            <div>
              <form id="form-comment" class="form-inline" role="form">
                <div class="form-group">                      
                  <input type="text" class="form-control" id="comment" placeholder="Enter comment">
                </div>
              </form>
            </div>

          </div> <!-- .message-body -->  

        </div> <!-- .status-message -->


        <div class="status-message">

          <div class="message-header">
            <div class="user-image">
              <img src="<?php echo base_url();?>/images/users/arsenal.jpg" alt="..." class="img-circle">
            </div>
            <div class="user-info">
              <span class="user-info-name">Tan Nguyen</span>
              <span class="user-info-date">1/1/2011 9:0 AM</span>
            </div>
          </div> <!-- .message-header -->

          <hr />

          <div class="message-body">

            <p>Double coffee, double milk, sitting and looking at the computer screen :)
             Vài đứa đã đi làm, vài đứa đang mải mê học (mày mò) thêm vài thứ gì đấy :
           </p>

           <p>
            <button id="btn-like" type="button" class="btn btn-xs btn-danger">
              <span class="glyphicon glyphicon-thumbs-up">19</span>
            </button>

            <button id="btn-like" type="button" class="btn btn-xs btn-primary">
              <span class="glyphicon glyphicon-share-alt">18</span>
            </button>
          </p>

          <div>
            <form id="form-comment" class="form-inline" role="form">
              <div class="form-group">                      
                <input type="text" class="form-control" id="comment" placeholder="Enter comment">
              </div>
            </form>
          </div>

        </div> <!-- .message-body -->  

      </div> <!-- .status-message -->

    </div> <!-- #status-list -->

  </div>

</div>

<div class="col-lg-4" id="recommend">

  <div class="row" id="recommend-visit-list">

    <div class="col-lg-12">

      <h4>Recommend Visit</h4>

      <div class="recommend-visit-list">

          <div class="row recommend-visit-list-visit">
            <img src="<?php echo base_url();?>/images/users/mountaint.jpg" alt="..." class="img-rounded img-responsive recommend-visit-list-image">
          </div><hr /> <!-- .recommend-visit-list-visit -->

          <div class="row recommend-visit-list-visit">
            <img src="<?php echo base_url();?>/images/users/road.jpg" alt="..." class="img-rounded img-responsive recommend-visit-list-image">
          </div><hr /> <!-- .recommend-visit-list-visit -->


        </div><!-- .recommend-visit-list -->


      </div>

    </div>    


    <div class="row" id="recommend-friend-list">

      <div class="col-lg-12">

        <h4>You may know</h4>

        <div class="row recommend-friend-list-friend">

          <div class="col-lg-3">
            <img id="iamge-test" src="<?php echo base_url();?>/images/users/tan.jpg" alt="..." class="img-rounded">
          </div>

          <div class="col-lg-4">
            <p>Nguyen Van Tan</p>
            <p>
              <button id="video" type="button" class="btn btn-xs btn-success">
                <span class="glyphicon glyphicon-plus"></span>
              </button>
            </p>
          </div>

        </div><hr /> <!-- .recommend-friend-list-friend -->


        <div class="row recommend-friend-list-friend">

          <div class="col-lg-3">
            <img id="iamge-test" src="<?php echo base_url();?>/images/users/tan.jpg" alt="..." class="img-rounded">
          </div>

          <div class="col-lg-4">
            <p>Nguyen Van Tan</p>
            <p>
              <button id="video" type="button" class="btn btn-xs btn-success">
                <span class="glyphicon glyphicon-plus"></span>
              </button>
            </p>
          </div>

        </div><hr /> <!-- .recommend-friend-list-friend -->


        <div class="row recommend-friend-list-friend">

          <div class="col-lg-3">
            <img id="iamge-test" src="<?php echo base_url();?>/images/users/tan.jpg" alt="..." class="img-rounded">
          </div>

          <div class="col-lg-4">
            <p>Nguyen Van Tan</p>
            <p>
              <button id="video" type="button" class="btn btn-xs btn-success">
                <span class="glyphicon glyphicon-plus"></span>
              </button>
            </p>
          </div>

        </div><hr /> <!-- .recommend-friend-list-friend -->




      </div>

    </div><!--  #recommend-friend-list -->

  </div> <!-- #recommend -->

  <div class="col-lg-2" id="suggest"></div> <!-- #suggest -->

</div> <!-- #row-body -->

</body>
</html>